<template>
	<div class="page pageFixed">
		<custom-box customback title="领取积分" @back="back">
			<div class="grade_box">
				<div class="scroll">
					<div class="grade_box_user flex a-center jlr">
						<div class="userInfo flex a-center">
							<div class="avatar"><img :src="studentMap.avatar"></div>
							<div class="userText">
								<h3>{{ studentMap.name }}</h3>
								<p>学号 ({{ studentMap.student_number }})</p>
							</div>
						</div>
						<div class="user_statistics flex a-center">
							<div class="avatar"><img src="../../assets/img/m01.png"></div>
							<div class="user_statistics_wrap">
								<div class="user_statistics_text">共<span>130</span>/积分待领取</div>
								<p>音乐24班</p>
							</div>
						</div>
					</div><!--user-->
					<div class="grade_box_item flex a-center">
						<div class="avatar"><img src="../../assets/img/m02.png"></div>
						<div class="grade_box_info flex jlr a-center">
							<div>
								<h4>积极回答</h4>
								<p>12/12 17:21:24</p>
							</div>
							<div class="number">
								<span>+50</span>/积分
							</div>
						</div>
					</div>
					<div class="grade_box_item flex a-center">
						<div class="avatar"><img src="../../assets/img/m03.png"></div>
						<div class="grade_box_info flex jlr a-center">
							<div>
								<h4>互帮互助</h4>
								<p>12/12 17:21:24</p>
							</div>
							<div class="number">
								<span>+80</span>/积分
							</div>
						</div>
					</div>
				</div>
				<div class="button grade_submit" @click="submit">全部领取</div>
			</div>
		</custom-box>
	</div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
	data(){
		return {
			include:[]			
		}
	},
	computed: {
		...mapState({
			studentNumber: state => state.integration.studentNumber,
			studentMap: state => state.integration.studentMap,
		})
	},
	mounted() {
		console.log('studentMap 学生学号:', this.studentMap)
	},
	methods:{
		back(){
			this.$emit('back')
		},
		submit(){
			console.log('学号', this.studentNumber, this.studentMap)
			this.$emit('next')
		}
	},
	mounted() {
		
	}
}
</script>

<style scoped lang="scss">
	.grade_box{width: 100%; height: 100%; padding: 0px .3rem;}
	.grade_box_user{border-bottom: 1px solid #E5EBF1; padding: .28rem 0;}
	.grade_box_item{border-bottom: 1px solid #E5EBF1; padding: .28rem 0;}	
	.grade_box_item .grade_box_info{padding-left: .26rem; flex:1;}
	.grade_box_item .grade_box_info h4{font-size: .32rem; color: #353535;}
	.grade_box_item .grade_box_info p{color: #909399; font-size: .24rem; margin-top: .1rem;}
	.grade_box_item .grade_box_info .number{font-size: .24rem; color: #353535; }
	.grade_box_item .grade_box_info .number span{font-size: .48rem; color: #F84638;}
	.userInfo{
		.avatar{
			width: 1.2rem; height: 1.2rem; border-radius: 50%; overflow: hidden;
			img {

			}
		}
		.userText{flex: 1; margin-left: .26rem;}
		.userText h3{font-size: .32rem; color: #353535;}
		.userText p{font-size: .24rem; color: #909399; margin-top: .1rem;}
		
	}
	.user_statistics_wrap{
		padding-left: .18rem;
		.user_statistics_text{font-size: .24rem; color: #353535;}
		.user_statistics_text span{color: #F84638; font-size: .48rem;}
		p{margin-top: .1rem; color: #B85C1B; font-size: .26rem;}
	}
	
	.grade_submit{position: absolute; left: 50%; transform: translateX(-50%); bottom: -0.1rem;}
	
</style>